<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			body{
				margin: 0;
				padding: 0;
			}
			#nav ul {
				zoom: 1;
				overflow: hidden;
				list-style: none;
				margin: 0;
				padding: 0;
				background: #333;
			}
			
			#nav li {
				float: left;
				width: 150px;
				height: 50px;
				line-height: 50px;
				text-align: center;
				text-decoration: none;
			}
			
			#nav a {
				color: #FFFFFF;
				text-decoration: none;
			}
			
			#nav a .en {
				display: none;
			}
			
			#nav a:hover {
				display: block;
				background: #000;
				color: #ddd;
			}
			
			#nav a:hover .en {
				display: inline;
			}
			
			#nav a:hover .cn {
				display: none;
			}
		</style>
	</head>
	<body>
		<div id="nav">
				<ul>
					<li id="first">
						<a href="index.html"><span class="cn">首页</span><span class="en">首页</span></a>
					</li>


					<li>
						<a href="boom.html"><span class="cn">LED时钟</span><span class="en">LED时钟</span></a>
					</li>
					<li>
						<a href="pingBao.html"><span class="cn">屏保弹跳</span><span class="en">屏保弹跳</span></a>
					</li>


					<li>
						<a href="TIji.html"><span class="cn">太极运动</span><span class="en">太极运动</span></a>
					</li>


					<li>
						<a href="shuaiWei.html"><span class="cn">摆尾效果</span><span class="en">摆尾效果</span></a>
					</li>
					
					<li>
						<a href="shadow.html"><span class="cn">阴影效果</span><span class="en">阴影效果</span></a>
					</li>
					
					<li>
						<a href="tanTanTan.html"><span class="cn">小球的弹跳</span><span class="en">小球的弹跳</span></a>
					</li>


					<li>
						<a href="house.html"><span class="cn">Canvas小房子</span><span class="en">Canvas小房子</span></a>
					</li>
				</ul>
			</div>
		<canvas id = "myCanvas" width="1400" height="750"></canvas>
		<script type="text/javascript">
			var canvas = document.getElementById("myCanvas");
			var ctx = canvas.getContext("2d");
			ctx.fill();
			
			var arcX1 = 50;
			var arcy1 = 50;
			var arcR1 = 50;
			var l1 = 5;
			var t1 = 5;
			
			
			var arcX2 = 100;
			var arcY2 = 100;
			var arcR2 = 100;
			var l2 = 5;
			var t2 = 5;
//			
			setInterval(function(){
				ctx.fillStyle = "rgba(100,200,255,0.3)";
				ctx.fillRect(0,0,1400,750);
				
				ctx.beginPath();
				ctx.fillStyle = "burlywood";
				ctx.arc(arcX1,arcy1,40,0,2*Math.PI);
				ctx.fill();
				arcX1 = arcX1+t1;
				arcy1 = arcy1+l1;
				if(arcX1>1400-arcR1 || arcX1<arcR1){
					t1=-t1;
				}
				if(arcy1>700-arcR1 || arcy1<arcR1){
					l1=-l1
				}
				
				
//				ctx.beginPath();
//				ctx.fillStyle = "gold";
//				ctx.arc(arcX2,arcY2,100,0,2*Math.PI);
//				ctx.fill();
//				arcX2 = arcX2+t1;
//				arcY2 = arcY2+l1;
//				if(arcX2>1400-arcR2 || arcX2<arcR2){
//					t2=-t2;
//				}
//				if(arcY2>700-arcR2 || arcY2<arcR2){
//					l2=-l2;
//				}
			},35);
		</script>
	</body>
</html>
